;(function () {


    const template = ` <div class="jumbotron">
                 <h2>ID : {{ id}}</h2>
                 <h2>{{sportDetail.title}}</h2>
                <p>{{sportDetail.content}}</p>
         </div>`;

    window.SportDetail = {
        template,
        data() {
            return {
                id: null,
                sportDetail: {}
            }
        },
        created() {
            // created 钩子函数只会初始化一次，当切换标题，就是当传递的id数据发生变化后，再次进行数据调用查询
            // 针对上述情况，使用watch监控，对$route 路由的变化进行监控
            this.getRportById();
        },
        methods: {
            getRportById() {
                axios.get("http://localhost:63342/vue-mxg/vue-08-router/02-bootstrap-ajax-router/sport.json").then(item => {

                    const request = item.data;
                    this.id = this.$route.params.id;
                    this.sportDetail = request.find(detail => {
                        return this.id == detail.id;
                    });


                }).catch(error => {
                    console.log(error.message);
                });
            }
        },
        // 进行监控
        watch: {
            '$route'() {
                this.getRportById();
            }
        }
    }

})();
